<template>
  <div class="f-bclos f-pa">
    <div class="m-top f-brow f-pr">
      <div class="m-back ">
        <div class="f-ib m-back-icon" @touchstart="back()"></div>
        <div class="f-ib m-back-set" @touchstart="backSet()"></div>
      </div>
      <div class="m-top-tit f-bavg flex-cent ">
        <div class="">
          <p class="f-ib">楼层模式配置</p>
        </div>
      </div>
    </div>
    <div class="m-modelName flex-cent">
      <input type="text" class="m-input" v-model="floorModList.modName" />
    </div>
    <div class="m-floor f-brow">
      <div class="">选择楼层</div>
      <div class="f-bavg f-brow f-iScroll m-list" ref="mFloor">
        <ul class="m-ul box">
          <li v-for="item in floorModList.floorList" :key="item.id" :class="item.cock==1?'active':''" @touchstart.stop="choiceFloor(item)">{{item.floorNum}}</li>
        </ul>
      </div>
    </div>
    <div class="m-module m-mg">
      <div class="m-tit f-brow">
        <div class="set-tit-name f-opt">{{floorNum}}楼灯组模块</div>
        <div class="set-tit-line f-bavg f-opt"></div>
        <div class="m-btn" :class="{'f-opt':modAllFlag}" @touchstart="choiceAllMod()">
          <div class="m-btn-icon f-ib m-allC"></div>
          <div class="m-btn-name f-ib">全选</div>
        </div>
      </div>
      <div class="m-module-list f-iScroll" ref="ligModList">
        <ul class="m-module-ul">
          <p v-if="moduleList.length==0" class="m-module-tips">{{tipsInfo}}</p>
          <li v-for="item in moduleList" :key="item.id" :class="item.cock==1?'active':''" @touchstart.stop="choiceLigMod(item)">
            <span>{{item.name}}</span>
            <i v-if="item.nameLight.length > 0"></i>
          </li>
        </ul>
      </div>
    </div>
    <div class="m-set m-mg">
      <div class="m-tit f-brow">
        <div class="set-tit-name f-opt">设置</div>
        <div class="set-tit-line f-bavg f-opt"></div>
      </div>
      <div class="m-set-switch">
        <div class="m-switch ">
          <div class="f-ib">模式开关：</div>
          <div class="switch-container f-ib">
            <input id="switch" type="checkbox" class="switch" v-model="floorModList.moduleSwitch" />
            <label for="switch"></label>
            <span></span>
          </div>
        </div>
        <div class="m-switch f-brow">
          <div class="">开启方是：</div>
          <div class="m-openWay f-bavg f-brow" v-if="floorModList.openWay">
            <div class="open-way flex-cent " :class="{'active':floorModList.openWay.cock==0}" @touchstart.stop="floorModList.openWay.cock=0;choiceOpenWay(floorModList.openWay)">
              <div>
                <div class="f-ib m-hand"></div>
                <span>手动</span>
              </div>
            </div>
            <div class="open-way flex-cent" :class="{'active':floorModList.openWay.cock==1}" @touchstart.stop="floorModList.openWay.cock=1;choiceOpenWay(floorModList.openWay)">
              <div>
                <div class="f-ib m-auto"></div>
                <span>自动</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="f-bavg m-submit flex-cent">
      <div class="btn-submit f-bsd" @touchstart="submit()">提交</div>
    </div>

    <!-- 弹框 灯组件 -->
    <modal-lig ref="dialog">
      <ul class="module-ul" slot="body">
        <li class="f-brow" v-for="item in modalLigList" :key="item.id">
          <div class="f-ib module-switch f-brow " :class="item.cock==1?'active':''" @touchstart="choiceModLig(item.id)">
            <i></i>
            <span class="f-bavg">{{item.name}}</span>
          </div>
          <div class="f-ib f-bavg module-range">
            <mt-range v-model="item.lightness" :disabled="item.cock==0"></mt-range>
          </div>
        </li>
      </ul>
    </modal-lig>

    <!-- 选择自动模式弹框 -->
    <modal-lig ref="automatic">
      <div slot="body" class="f-bclos f-pa">
        <div class="f-brow">
          <div class="time-btn f-brow " v-for="item in autoWay" :key="item.id" :class="item.cock==1?'active':''" @touchstart="choiceTimeWay(item.id)">
            <i></i>
            <span class="f-bavg">{{item.name}}</span>
          </div>
        </div>

        <div class="f-bavg " v-for="(item,index) in autoWay" :key="item.id" v-show="item.cock==1">
          <div class="time-tips" v-if="index < 3">{{item.text}}</div>
          <div class="time-control f-brow f-bavg" v-if="index < 3">
            <div class="input-group f-brow" id="startM">
              <div>起</div>
              <input type="text" class="form-control " :class="item.cock==1?'startime':''" :value="item.startTime" placeholder="" readonly>
              <span class="input-group-addon"> </span>
            </div>
            <div class="input-group f-brow" ref="end-minutes">
              <div>止</div>
              <input type="text" class="form-control " :class="item.cock==1?'endtime':''" :value="item.endTime" placeholder="" readonly>
              <span class="input-group-addon"> </span>
            </div>
          </div>
          <div v-else class="f-bavg " id="dateTimebox" ref="dateTimebox">
            <input type="text" ref="dateTime" id="dateTime" class="time-date" v-model="item.text" readonly placeholder="点击选择时间" />
          </div>
        </div>
      </div>
    </modal-lig>

  </div>
</template>
<script>
import modallig from "./modal/modal-lig.vue";
import IScroll from "iscroll";
export default {
  name: "modAll",
  data() {
    return {
      mFloor: "", //楼层 iscroll 对象
      ligModList: "", // 模块 iscroll 对象

      floorModList: [], //楼层模式 信息
      floorNum: "", //楼层号
      moduleList: [], //楼层 灯组模块 信息
      modalLigList: [], //存放模态框中 灯数据

      modAllFlag: true, //是否全选
      submitFlag: true, //能否提交,
      tipsInfo: "请选择楼层",
      // 自动模式弹框
      autoWay: [], //存放 自动开启 信息
      startTime: "",
      endTime: "",
      daterangepicker: ""
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    this.$nextTick(function() {
      this.mFloor = new IScroll(this.$refs.mFloor, {
        scrollX: true,
        scrollY: false
      });
      //
      this.ligModList = new IScroll(this.$refs.ligModList);
    });
  },
  updated() {
    this.$nextTick(function() {
      //刷新 iscroll 对象
      this.mFloor.refresh();
      this.ligModList.refresh();

      //开始时间
      this.startTime = $(".startime").clockpicker({
        placement: "bottom",
        align: "left",
        autoclose: true,
        default: "now",
        afterDone: () => {
          if (
            this.compareDate(this.startTime[0].value, this.endTime[0].value)
          ) {
            this.startTime[0].value = "";
          }
        }
      });
      //结束时间
      this.endTime = $(".endtime").clockpicker({
        placement: "bottom",
        align: "left",
        autoclose: true,
        default: "now",
        afterDone: () => {
          if (
            !this.compareDate(this.endTime[0].value, this.startTimeBtn[0].value)
          ) {
            this.endTime[0].value = "";
          }
        }
      });
      //
      $(this.$refs.dateTime).val("");
    });
  },
  methods: {
    //返回 楼层管理
    back() {
      this.$router.go(-1); //返回上一层
    },
    //返回 设置
    backSet() {
      this.$router.push({ path: "/main/set" });
    },
    //获取数据源
    getData() {
      this.$http
        .post(
          process.env.API_HOST + "/static/mod-all.json",
          {},
          { headers: { "Content-Type": "application/json" } }
        )
        .then(
          res => {
            this.floorModList = res.body.result;
            let modList = this.floorModList.floorList.find(arr => {
              return arr.cock == 1;
            });

            if (modList != undefined) {
              this.floorNum = modList.floorNum;
              this.moduleList = modList.moduleList;
            } else {
              this.submitFlag = false;
            }

            this.autoWay = this.floorModList.openWay.way; //自动开启   数据
          },
          error => {
            console.log(error);
          }
        );
    },
    //选择 楼层 加载 该 楼层灯组模块  信息
    choiceFloor(item) {
      this.floorNum = item.floorNum;
      this.moduleList = item.moduleList; //加载 灯组模块
      if (this.moduleList.length == 0) {
        this.tipsInfo = "该楼层下暂无灯组模块信息";
      }
    },
    //全选
    choiceAllMod() {
      if (this.moduleList.length == 0) {
        return false;
      }
      if (this.modAllFlag) {
        this.modAllFlag = false;
        this.moduleList.map(arr => {
          arr.cock = 1;
        });
        // 弹框 灯组 信息 全部选中 并 回到默认值
        this.moduleList.map(arr => {
          if (arr.nameLight.length > 0) {
            arr.nameLight.map(lig => {
              lig.cock = 1;
              lig.lightness = 50;
            });
          }
        });
      } else {
        this.modAllFlag = true;
        this.moduleList.map(arr => {
          arr.cock = 0;
        });
        // 弹框 灯组 信息 全部选中 并 回到默认值
        this.moduleList.map(arr => {
          if (arr.nameLight.length > 0) {
            arr.nameLight.map(lig => {
              lig.cock = 0;
            });
          }
        });
      }
    },
    //选择 灯组 中的信息
    choiceLigMod(item) {
      if (item.nameLight.length > 0) {
        let old_modalLigList = JSON.parse(JSON.stringify(item.nameLight)); //深考贝
        //判断是否有灯组
        this.modalLigList = item.nameLight; //获取 模态框循环的数据
        this.$refs.dialog.modal.title = item.name; // 设置模态框 title 值
        this.$refs.dialog
          .confirm()
          .then(() => {
            // 点击确定按钮的回调处理
            let arr = this.modalLigList.filter(arr => {
              return arr.cock == 1;
            });
            if (arr.length > 0) {
              //判断 灯组 中 是否 有选中的
              item.cock = 1;
            } else {
              item.cock = 0;
            }
          })
          .catch(() => {
            // 点击取消按钮的回调处理
            item.nameLight = this.modalLigList = old_modalLigList;
          });
      } else {
        if (item.cock == 0) {
          item.cock = 1;
        } else {
          item.cock = 0;
        }
      }
    },
    // 弹框 中 点击选择
    choiceModLig(id) {
      this.modalLigList.find(arr => {
        //  选中 or 取消选中
        if (arr.id == id) {
          if (arr.cock == 1) {
            arr.cock = 0;
          } else {
            arr.cock = 1;
          }
        }
      });
    },

    //选择 开启方式
    choiceOpenWay(item) {
      if (item.cock == 0) {
        //手动模式
      } else {
        //自动模式
        this.$refs.automatic.modal.title = "时间设置"; // 设置模态框 title 值
        this.$refs.automatic
          .confirm()
          .then(() => {
            //点击确定按钮的回调处理
            this.autoWay.filter(arr => {
              //过滤 选中的 自动 时间模块 并 赋值
              if (arr.cock == 1) {
                if (arr.id == 3) {
                  $(".applyBtn").click(); //触发 daterangepicker 控件 点击事件
                  arr.text = this.$refs.dateTime[0].value; //赋值
                } else {
                  arr.startTime = this.startTime[0].value; //赋值
                  arr.endTime = this.endTime[0].value; //赋值
                }
              }
            });
          })
          .catch(() => {
            //点击取消按钮的回调处理
            item.cock = 0;
          });
      }
    },
    // 选择时间 模式
    choiceTimeWay(id) {
      this.autoWay.map(arr => {
        if (arr.id == id) {
          arr.cock = 1;
        } else {
          arr.cock = 0;
        }
      });
    },
    //提交
    submit() {
      if (this.submit) {
      }
    },
    //判断 字符串 时间 大小
    compareDate(t1, t2) {
      var date = new Date();
      var a = t1.split(":");
      var b = t2.split(":");
      return date.setHours(a[0], a[1]) > date.setHours(b[0], b[1]);
    }
  },
  //监听 对象
  watch: {
    /**
     *  监听灯组模块 是否有选中
     *    有选中 -> 该楼层选中
     *    没有 选中 -> 该楼层不选中
     */
    moduleList: {
      handler(newVal, oldVal) {
        let checkedList = newVal.filter(arr => arr.cock == 1);
        if (checkedList.length > 0) {
          this.floorModList.floorList.map(arr => {
            if (arr.floorNum == this.floorNum) {
              arr.cock = 1;
            }
          });
          this.submitFlag = true;
        } else {
          this.floorModList.floorList.map(arr => {
            if (arr.floorNum == this.floorNum) {
              arr.cock = 0;
            }
          });
          this.submitFlag = false;
        }
      },
      deep: true
    }
  },
  //组件
  components: {
    modalLig: modallig
  }
};
</script>

<style scoped>
.m-tit > .set-tit-name {
  margin-left: 0;
}
.modal-hid {
  overflow: hidden;
}
.module-range > .mt-range {
  margin-top: 0.04rem;
}
</style>